<template>
	<view class="main-content">
		<u-navbar ref="navbar" title="DOFM" :autoBack="false" bgColor="#000" :placeholder="true">
		</u-navbar>
		<view class="show-content" v-show="value === 'play'">
			<play />
		</view>
		<view class="show-content" v-show="value === 'record'">
			<calendar ref="calendar" :navHeight="navHeight" />
		</view>
		<view class="show-content music" v-show="value === 'music'">
			<music />
		</view>
		<u-tabbar :value="value" @change="name => value = name" :safeAreaInsetBottom="true" activeColor="#fff">
			<u-tabbar-item name="play" text="玩法" icon="heart-fill"></u-tabbar-item>
			<u-tabbar-item name="record" text="记录" icon="calendar-fill"></u-tabbar-item>
			<u-tabbar-item name="music" text="放映" icon="play-circle-fill"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import music from "./music/index.vue"
	import calendar from "./calendar/index.vue"
	import play from "./play/index.vue"
	export default {
		components: {
			music,
			calendar,
			play
		},
		data() {
			return {
				value: "play",
				ifNeedRefresh: false,
				navHeight: ""
			}
		},
		mounted() {
			this.navHeight = this.$refs.navbar.height
		},
		watch: {
			ifNeedRefresh(newVal) {
				if (newVal) {
					this.$refs.calendar.updateTime()
					this.ifNeedRefresh = false
				}
			}
		},
	}
</script>

<style lang="less">
	@import url("@/static/fonts/iconfont.css");

	.main-content {
		height: 100vh;
		width: 100vw;
		background-color: #000;
		color: #fff;
		display: flex;
		flex-direction: column;

		.u-navbar .u-navbar__content {
			.u-navbar__content__left {
				display: none;
			}

			.u-navbar__content__title {
				color: #fff;
			}
		}

		.show-content {
			flex: 1;
		}

		.u-tabbar {
			flex-grow: 0 !important;

			.u-tabbar__content {
				background-color: #000;
			}

		}
	}
</style>